<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-17 15:04:34
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-25 17:31:29
 * @FilePath: \appGly\components\formz\components\pcs.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="">
    <u-form-item
      :label="item.label"
      :prop="item.value"
      borderBottom
      ref="item1"
    >
      <u-button
        :text="showtext"
        :hairline="false"
        :customStyle="btnstyle"
        @click="btntap"
      ></u-button>
    </u-form-item>

    <u-popup :show="show" mode="right">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        style="height: 100vh"
        refresher-background="#f4f7f8"
        :refresher-threshold="100"
        refresher-enabled="true"
        refresher-default-style="black"
      >
        <u-navbar title="站点选择" :autoBack="false" @leftClick="popupback" />
        <view style="width: 100vw"></view>
        <view class="searchbox">
          <u-search
            placeholder="搜索"
            v-model="searchstr"
            :showAction="false"
            @change="$u.debounce(searchchange, 500)"
          ></u-search>
        </view>
        <view class="pcsrouter u-flex u-flex-wrap" v-show="searchstr == ''">
          <view
            v-for="(item, index) in pcsrouter"
            :key="index"
            @click="pcsrouteritemtap(item, index)"
            class="u-flex"
          >
            {{ item.label }}
            <u-icon
              name="arrow-right"
              v-if="index != pcsrouter.length - 1"
              color="#999"
              size="28rpx"
            ></u-icon>
          </view>
        </view>
        <view
          class="pcsitem"
          v-for="(item, index) in pcslist"
          :key="index"
          @click="itemtap(item)"
        >
          <view
            class="radio"
            :class="item.id == radiovalue ? ['active'] : []"
          ></view>
          <view class="u-line-1" style="flex: 1; width: 0; overflow: hidden">
            {{ item.pcs }}
          </view>
          <view
            class="u-flex children u-flex-between"
            @click.stop="childrentap(item)"
            v-show="searchstr == ''"
          >
            <u-line
              :hair-line="false"
              color="#2093f5"
              direction="col"
              length="32rpx"
            />
            <view style="width: 8rpx"></view>
            {{ $z.$t("查看下级") }}
          </view>
        </view>
        <fixedbtn>
          <view style="flex: 1" class="u-flex u-flex-between">
            <view class="u-font-32">
              {{ $z.$t("当前站点") }}： {{ radiodata.pcs }}
            </view>
            <view class="">
              <u-button
                type="primary"
                :customStyle="{ height: '60rpx' }"
                @click="qrbtnfn"
              >
                {{ $z.$t("确定") }}
              </u-button>
            </view>
          </view>
        </fixedbtn>
      </scroll-view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    props: {
      item: {
        typeof: Object,
        default: () => {
          return {};
        },
      },
      data: {
        typeof: Object,
        default: () => {
          return {};
        },
      },
      value: {
        typeof: [String, Number, Boolean, Array, Object],
        default: () => {
          return "";
        },
      },
    },
    data() {
      return {
        inputValue: "",
        btnstyle: {
          border: "none",
          padding: "0",
          justifyContent: "flex-start",
        },
        show: false,
        searchstr: "",
        pcsrouter: [
          {
            label: uni.$z.$t("首页"),
            id: "",
          },
        ],
        pcslist: [],
        radiovalue: "",
        radiodata: {},
        showtext: "",
      };
    },
    watch: {
      value: {
        async handler() {
          console.log(this.value, "1541");
          this.radiovalue = this.value;
          let showtext = this.$z.$t("请选择");
          this.radiodata = {};
          if (this.value != "") {
            let data = await this.$store.dispatch("request/getRequest", {
              url: "/Station",
              data: {
                id: this.value,
              },
            });
            data = data.length == 1 ? data[0] : {};
            this.radiodata = data;
            showtext = data.pcs;
          }
          this.showtext = showtext;
        },
        immediate: true,
      },
    },
    methods: {
      popupback() {
        this.show = false;
      },
      itemtap(item) {
        this.radiovalue = item.id;
        this.radiodata = item;
        // this.$emit("input", item.id)
      },
      qrbtnfn() {
        this.$emit("input", this.radiovalue);
        this.show = false;
      },
      async btntap() {
        this.show = true;
        await this.$store.dispatch("user/getuser");
        let pcsrouter = await this.getpcspid(this.value, []);
        pcsrouter = pcsrouter.reverse().slice(0, pcsrouter.length - 1);
        this.pcsrouter = [
          {
            label: uni.$z.$t("首页"),
            id: "",
          },
          ...pcsrouter,
        ];
        this.pcsrouteritemtap(
          this.pcsrouter[this.pcsrouter.length - 1],
          this.pcsrouter.length - 1
        );
      },
      async getpcspid(id, r = []) {
        if (id == "") {
          return r;
        }
        let data = await this.$store.dispatch("request/getRequest", {
          url: "/Station",
          data: {
            id,
          },
        });
        if (data.length == 0) {
          return r;
        }
        data = data[0];
        r.push({
          label: data.pcs,
          id: data.id,
        });
        if (data.id == this.$store.state.user.USearch.pcs) {
          return r;
        } else {
          return this.getpcspid(data.pid, r);
        }
      },
      blur() {
        this.$emit("input", this.inputValue);
      },
      searchchange() {},
      childrentap(item) {
        this.pcsrouter.push({
          label: item.pcs,
          id: item.id,
        });
        this.pcsrouteritemtap(
          this.pcsrouter[this.pcsrouter.length - 1],
          this.pcsrouter.length - 1
        );
      },
      async pcsrouteritemtap(item, index) {
        this.pcsrouter = this.pcsrouter.slice(0, index + 1);
        let data = [];
        if (index == 0) {
          data = await this.$store.dispatch("request/getRequest", {
            url: "/Station",
            data: {
              id: this.$store.state.user.USearch.pcs,
            },
          });
        } else {
          data = await this.$store.dispatch("request/getRequest", {
            url: "/StationPid",
            data: {
              pid: item.id,
            },
          });
        }
        this.pcslist = data;
      },
    },
  };
</script>

<style lang="scss">
  .pcsview {
    height: 80rpx;
    flex: 1;
    display: flex;
    align-items: center;
  }

  .children {
    width: auto;
    justify-content: space-between;
    font-size: 24rpx;
    color: #2093f5;
    padding: 0 30rpx;
    height: 100%;
  }

  .searchbox {
    padding: 22rpx 30rpx;
  }

  .pcsrouter {
    padding: 20rpx 30rpx;
  }

  .pcsitem {
    height: 80rpx;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 40rpx;

    // border-bottom: 1px solid #999;
    &::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 15px;
      height: 1px;
      content: "";
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #eeeeee;
    }
  }

  .radio {
    width: 50rpx;
    height: 50rpx;
    border: 4rpx solid #aaa;
    border-radius: 50%;
    margin-right: 30rpx;

    &.active {
      position: relative;
      border-color: #2093f5;
      display: flex;
      justify-content: center;
      align-items: center;

      &::after {
        content: "";
        width: 26rpx;
        height: 26rpx;
        display: block;
        border-radius: 50%;
        background-color: #2093f5;
      }
    }
  }
</style>
